<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安装</title>


    <script src="./../vue/vue.js"></script>

    <!-- 通过cdn直接下载 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <!-- 这是一个生产版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->

</head>
<body>
     <!-- 
        如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
        这种方法需要 加 type = "module"
    -->
    <!-- <script type="module">
        import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js"
        let vm = new Vue()
        console.log(vm)
    </script> -->

    <!-- Vue 的作用
        1、声明式渲染       {{ message }}
        2、文本绑定         v-bind:title="title"    :title="title"
        3、条件和循环       v-if="" v-elif v-else   v-for
        4、绑定用户事件     v-on:click = "events"
        5、绑定用户输入     v-model
        6、组件化应用构建       
    -->
    <div id="app">

        <!-- 1、声明式渲染 -->
        <div>{{ message }}</div>
        
        <!-- 2、文本绑定 -->
        <div v-bind:title="message">鼠标放在我上面看看</div>

        <!-- 3、条件和循环 -->
        <div v-if="showTitle">
            这是是条件判断
        </div>
        <div v-else>这是else 到的地方</div>
        <div>
            <ul>
                <li v-for="item in names">{{ item }}</li>
            </ul>
        </div>

        <!-- 4、绑定用户事件 -->
        <div>
            <input type="button" value="点击" v-on:click="onClickButton">
        </div>

        <!-- 5、绑定用户输入 -->
        <div>
            <div>{{ input }}</div>
            <input type="text" placeholder="请输入" v-model = "input">
        </div>

        <!-- 6、组件化应用构建 -->
        <div>
            <ol>
                <todo-list v-for="list in todoList" v-bind:todo="list.task" v-bind:key="list.id"></todo-list>
            </ol>
        </div>

        

    </div>

    <script>

        Vue.component('todo-list',{
            props: ['todo'],
            template: '<li>这是一个待办项{{ todo }}</li>'
        })

        var app = new Vue({
            el: "#app",
            data: {
                number: 1,
                message: "你好"+ new Date().toLocaleString(),
                showTitle: true,
                names: ["小红","小名","小黄"],
                input: null,
                todoList: [
                    {id: 0, task: "任务1"},
                    {id: 1, task: "任务2"},
                    {id: 2, task: "任务3"},
                    {id: 3, task: "任务4"}
                ]
            },
            methods: {
                onClickButton(){
                    //  这里注意在方法内部 不需要同微信小游戏一样调用 this.data.num 方法，可以直接调用
                    this.message = "点击事件" + (++this.number)
                }
            },
        })

    </script>
    
   
</body>
</html>